<template>
  <div style="flex:1;" class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_userinfo_id" placeholder='用户编号'
            condition="f_userinfo_id = '{}'" v-next-el='user'  v-el:userinfo
            :size="model.f_userinfo_id ? model.f_userinfo_id.length: 4">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_user_name" placeholder='用户姓名'
            condition="f_user_name like '%{}%'" v-next-el='userphone' v-el:username
            :size="model.f_user_name ? model.f_user_name.length * 2 : 4">
          </div>
          <div class="form-group">
            <v-select id="f_user_type"
            v-model="model.f_user_type"
            placeholder='用户类型'
            condition="f_user_type ='{}'"
            :value.sync="model.f_user_type"
            :options='$parent.$parent.userTypes'
            close-on-select clear-button>
            </v-select>
          </div>
          <div class="form-group">
            <v-select id="f_gasproperties"
            v-model="model.f_gasproperties"
            placeholder='用气类型'
            condition="f_gasproperties ='{}'"
            :value.sync="model.f_gasproperties"
            :options='$parent.$parent.gasproperties'
            close-on-select clear-button>
            </v-select>
          </div>
          <!-- <div class="form-group">
            <datepicker id="f_hand_date" placeholder="起始日期"
              v-model="model.f_begin_date"
              :value.sync="model.f_begin_date"
              :format="'yyyy-MM-dd'"
              width="140px">
            </datepicker>
          </div> -->
          <div class="form-group">
            <datepicker id="f_hand_date" placeholder="截止日期"
              v-model="model.f_end_date"
              :value.sync="model.f_end_date"
              :format="'yyyy-MM-dd'"
              condition="f_hand_date <"
              width="140px">
            </datepicker>
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_residential_area" placeholder='小区'
            condition="f_residential_area like '%{}%'" v-el:address
            :size="model.f_residential_area ? model.f_residential_area.length * 2 : 2">
          </div>
          <div class="form-group" >
            <v-select :value.sync="model.f_filiale" v-model='model.f_filiale'
            :options='$parent.$parent.filiales' placeholder='分公司'
            close-on-select
            condition="f_filiale = '{}'"></v-select>
          </div>

          <div class="form-group">
            <v-select :value.sync="model.f_outlets" v-model='model.f_outlets'
                :options='$parent.$parent.outletArr' placeholder='营业网点'
                close-on-select
                condition="f_outlets = '{}'"></v-select>
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" @click="search()" v-el:cx>查询</button>
          </div>
          <div class="form-group">
            <export-excel :data="{beginDate: `${model.f_begin_date} 00:00:00`, endDate: `${model.f_end_date} 23:59:59`,condition: condition}" bean="用户月结欠费查询导出" sqlurl="rs/logic/exportfile"></export-excel>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
             <th>序号</th>
             <th>用户编号</th>
			       <th>用户基本信息</th>
             <th>电话</th>
             <th>用气类型</th>
             <!-- <th>合同编号</th> -->
             <th>上次表底数</th>
             <th>本次表底数</th>
             <th>欠费日期</th>
             <th>应交气量</th>
             <th>用气金额</th>
             <th>账户余额</th>
             <th>欠费金额</th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;">{{$index+1}}</td>
          <td style="text-align: center;">{{row.f_userinfo_id}}</td>
          <td style="text-align: center;">{{row.f_user_name}}&nbsp;&nbsp;{{row.f_address}}</td>
          <td style="text-align: center;">{{row.f_user_phone}}</td>
          <td style="text-align: center;">{{row.f_gasproperties}}</td>
          <!-- <td style="text-align: center;">{{row.f_contract_id}}</td> -->
          <td style="text-align: center;">{{row.f_last_tablebase.toFixed(2)}}</td>
          <td style="text-align: center;">{{row.f_tablebase.toFixed(2)}}</td>
          <td style="text-align: center;">{{row.f_hand_date}}</td>
          <td style="text-align: center;">{{row.f_oughtamount.toFixed(2)}}</td>
          <td style="text-align: center;">{{row.f_oughtfee.toFixed(2)}}</td>
          <td style="text-align: center;">{{row.f_balance.toFixed(2)}}</td>
          <td style="text-align: center;">{{row.qianfei.toFixed(2)}}</td>
        </template>

        <template partial='foot'>
          <td style="text-align: center;">合计</td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <!-- <td style="text-align: center;"></td> -->
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;">{{model.sums.f_oughtamount.toFixed(2)}}</td>
          <td style="text-align: center;">{{model.sums.f_oughtfee.toFixed(2)}}</td>
          <td style="text-align: center;">{{model.sums.f_balance.toFixed(2)}}</td>
          <td style="text-align: center;">{{model.sums.qianfei.toFixed(2)}}</td>
        </template>
      </data-grid>
  </criteria-paged>
</template>

<script>
/**
*用户档案查询列表以及添加操作组件
*/
import * as Util from '../../../Util'
import { PagedList } from 'vue-client'
import AppData from '../../../../stores/AppData'

export default {
  title: '用户欠费查询',
  data () {
    return {
      model: new PagedList('rs/sql/ArreaUser', 50, {}, {f_oughtamount: '', f_oughtfee: '', f_balance: '', qianfei: ''}),
      rows: null,
      whetherPay: [{label: '全部', value: ''},
                  {label: '已缴费', value: '是'},
                  {label: '未缴费', value: '否'}]
    }
  },
  props: {
    excelurl: {
      type: String
    },
    row: {}
  },
  ready () {
    this.$refs.paged.$refs.cri.model.f_end_date = Util.toStandardDateString()
    this.search()
  },
  methods: {
    search () {
      console.log('欠费查询，，，，', this.$refs.paged.$refs.cri)
      this.$refs.paged.$refs.cri.search()
    },
    selfSearch (args) {
      if (args) {
        this.model.params.fEndDate = this.$refs.paged.$refs.cri.model.f_end_date
      }
      // 如果隶属总公司，不加任何判断
      if (!Util.f.parent.parent.name.includes('统一资源管理') && Util.f.parent.orgtype !== '总公司') {
        this.$refs.paged.$refs.cri.model.f_filiale = [Util.f.f_fengongsi]
        args.condition = `${args.condition} and f_filiale = '${Util.f.f_fengongsi}'`
      }
      this.model.search(args.condition, args.model)
    },
    clean () {
      this.$refs.paged.$refs.grid.select(null)
      this.$dispatch('clean')
    }
  },
  computed: {
    gasproperties () {
      return [{label: '全部', value: ''}, ...AppData.getParam('用气性质')]
    },
    userTypes () {
      return [{label: '全部', value: ''}, {label: '民用', value: '民用'}, {label: '非民用', value: '非民用'}]
    },
    filiales () {
      let rs = []
      for (let i = 0; i < Util.f.f_allfiliale.length; i++) {
        rs.push({label: Util.f.f_allfiliale[i].label, value: Util.f.f_allfiliale[i].label})
      }
      return [{label: '全部', value: ''}, ...rs]
    },
    outletArr () {
      let rs = []
      if (this.$refs.paged.$refs.cri.model.f_filiale.length > 0) {
        for (let i = 0; i < Util.f.f_allfiliale.length; i++) {
          if (Util.f.f_allfiliale[i].label === this.$refs.paged.$refs.cri.model.f_filiale[0]) {
            rs = Util.f.f_allfiliale[i].value
          }
        }
      }
      return [{label: '全部', value: ''}, ...rs]
    }
  }
}
</script>
<style media="screen">
  .divtext {
    min-width: 50px;
    max-width: 200px;
    border: 1px solid green;
    display: inline-block;
  }
</style>
